Veebifontide API: dünaamilise fondilaadimise meisterlik valdamine parema kasutajakogemuse nimel

Tänapäeva veebiarenduse maastikul on visuaalselt köitva ja hea jõudlusega kasutajakogemuse pakkumine esmatähtis. Kohandatud veebifondid mängivad brändingu ja esteetika seisukohalt olulist rolli, kuid halvasti rakendatud fondilaadimine võib oluliselt mõjutada veebisaidi jõudlust ja kasutajate rahulolu. Veebifontide API annab arendajatele peenhäälestatud kontrolli fondilaadimise üle, võimaldades neil optimeerida fontide edastamist ja luua sujuvaid kogemusi kasutajatele üle maailma erinevates seadmetes ja võrkudes. See põhjalik juhend uurib üksikasjalikult veebifontide API-d, käsitledes selle funktsionaalsust, eeliseid ja parimaid praktikaid tõhusaks dünaamiliseks fondilaadimise kontrolliks.

Miks on fontide optimeerimine oluline?

Enne veebifontide API spetsiifikasse süvenemist on oluline mõista, miks on fontide optimeerimine nii kriitilise tähtsusega. Mõelge nendele võtmeteguritele:

• Mõju jõudlusele: Suured fondifailid võivad oluliselt pikendada lehe laadimisaega, eriti aeglasemate võrguühenduste korral. See mõjutab negatiivselt kasutajakogemust, põhjustades kõrgemaid põrkemäärasid ja madalamat kaasatust.
• Renderdamise käitumine: Brauserid käsitlevad fondilaadimist erinevalt. Vaikimisi võivad mõned brauserid blokeerida renderdamise, kuni fondid on täielikult laaditud, mille tulemuseks on "nähtamatu teksti välgatus" (FOIT). Teised võivad esialgu kuvada varufonte, põhjustades "stiilimata teksti välgatuse" (FOUT).
• Kasutajakogemus: Ebaühtlane või hilinenud fontide renderdamine võib häirida kasutajakogemust ja luua häiriva efekti, eriti rikkaliku tüpograafiaga veebisaitidel.
• Juurdepääsetavus: Korrektselt rakendatud veebifondid on juurdepääsetavuse seisukohalt üliolulised, tagades, et nägemispuudega kasutajad saavad sisu mugavalt lugeda.

Sissejuhatus veebifontide API-sse

Veebifontide API (tuntud ka kui Font Loading API) on JavaScripti liideste komplekt, mis võimaldab arendajatel programmeeritavalt kontrollida veebifontide laadimist ja renderdamist. See annab peenhäälestatud kontrolli fondilaadimise sündmuste üle, võimaldades arendajatel rakendada keerukaid fondilaadimise strateegiaid ja optimeerida jõudlust. Põhiliides on FontFace liides.

Veebifontide API peamised omadused on järgmised:

• Dünaamiline fondilaadimine: Laadige fonte nõudmisel, ainult siis, kui neid on vaja, vähendades esialgset lehe laadimisaega.
• Fondilaadimise sündmused: Kuulake fondilaadimise sündmusi (nt loading, loadingdone, loadingerror), et rakendada kohandatud laadimisindikaatoreid või varustrateegiaid.
• FontFace konstrueerimine: Looge FontFace objekte, et määratleda kohandatud fondinäidiseid ja rakendada neid dünaamiliselt elementidele.
• Fondi aktiveerimise kontroll: Kontrollige, millal fondid aktiveeritakse ja dokumendile rakendatakse.

FontFace liidese kasutamine

FontFace liides on veebifontide API keskne komponent. See võimaldab teil luua fondinäidise objekte erinevatest allikatest, näiteks URL-idest, ArrayBufferitest või isegi SVG-fontidest. Siin on põhiline näide FontFace objekti loomisest URL-i kaudu:

            const font = new FontFace('MyCustomFont', 'url(/fonts/MyCustomFont.woff2)');

font.load().then(function(loaded_face) {
  document.fonts.add(loaded_face);
  document.body.style.fontFamily = 'MyCustomFont, serif'; // Apply the font
}).catch(function(error) {
  console.error('Font loading failed:', error);
});

            

              
                Copy
              
            
          

Vaatame seda koodijuppi lähemalt:

1. new FontFace('MyCustomFont', 'url(/fonts/MyCustomFont.woff2)'): See loob uue FontFace objekti fondipere nimega 'MyCustomFont' ja fondifaili URL-iga. Esimene argument on fondipere nimi, mida kasutate oma CSS-is. Teine argument määrab fondifaili asukoha.
2. font.load(): See käivitab fondilaadimise protsessi. See tagastab lubaduse (promise), mis laheneb, kui font on edukalt laaditud ja dekodeeritud, või lükatakse tagasi vea ilmnemisel.
3. .then(function(loaded_face) { ... }): See tegeleb fondi eduka laadimisega. Tagasikutsefunktsiooni sees teostame järgmised sammud:
• document.fonts.add(loaded_face): See lisab laaditud fondinäidise dokumendi fontide loendisse, muutes selle kasutamiseks kättesaadavaks. See on ülioluline samm.
• document.body.style.fontFamily = 'MyCustomFont, serif': See rakendab kohandatud fondi body elemendile. Määrame ka varufondi (serif) juhuks, kui kohandatud fondi laadimine ebaõnnestub.
4. .catch(function(error) { ... }): See tegeleb kõikide vigadega, mis fondilaadimise ajal ilmnevad. Tagasikutsefunktsiooni sees logime vea konsooli silumise eesmärgil.

Fondilaadimise sündmuste kasutamine

Veebifontide API pakub mitmeid fondilaadimise sündmusi, mida saate kuulata, et rakendada kohandatud laadimisindikaatoreid või varustrateegiaid. Nende sündmuste hulka kuuluvad:

• loading: Käivitatakse, kui fondilaadimise protsess algab.
• loadingdone: Käivitatakse, kui font on edukalt laaditud.
• loadingerror: Käivitatakse, kui fondilaadimise ajal ilmneb viga.

Saate neid sündmusi kuulata, kasutades addEventListener meetodit FontFace objektil:

            font.addEventListener('loading', function() {
  console.log('Font loading started...');
  // Show a loading indicator
});

font.addEventListener('loadingdone', function() {
  console.log('Font loaded successfully!');
  // Hide the loading indicator
});

font.addEventListener('loadingerror', function(error) {
  console.error('Font loading error:', error);
  // Display an error message or use a fallback font
});

            

              
                Copy
              
            
          

Kohandatud fondilaadimise strateegiate rakendamine

1. Eelistage kriitilisi fonte

Tuvastage fondid, mis on teie veebisaidi esmaseks renderdamiseks hädavajalikud (nt pealkirjades ja navigeerimisel kasutatavad fondid). Laadige need fondid esimesena ja lükake vähem oluliste fontide laadimine edasi. See võib oluliselt parandada teie saidi tajutavat jõudlust.

            // Load critical fonts
const criticalFont = new FontFace('CriticalFont', 'url(/fonts/CriticalFont.woff2)');
criticalFont.load().then(function(loaded_face) {
  document.fonts.add(loaded_face);
  // Apply critical font to relevant elements
  document.querySelector('h1').style.fontFamily = 'CriticalFont, sans-serif';
});

// Load non-critical fonts later
setTimeout(function() {
  const nonCriticalFont = new FontFace('NonCriticalFont', 'url(/fonts/NonCriticalFont.woff2)');
  nonCriticalFont.load().then(function(loaded_face) {
    document.fonts.add(loaded_face);
    // Apply non-critical font to relevant elements
    document.querySelector('p').style.fontFamily = 'NonCriticalFont, serif';
  });
}, 1000); // Delay loading by 1 second

            

              
                Copy
              
            
          

2. Kasutage varufonte

Määrake oma CSS-is alati varufondid, et tagada sisu loetavus ka siis, kui kohandatud fondid ei lae. Valige varufondid, mis on stiililt sarnased teie kohandatud fontidega, et minimeerida visuaalseid häireid. Kaaluge font-display CSS-i omaduse kasutamist koos veebifontide API-ga, et saavutada veelgi peenem kontroll fondi renderdamise käitumise üle.

            body {
  font-family: 'MyCustomFont', 'Helvetica Neue', Arial, sans-serif;
}

            

              
                Copy
              
            
          

Selles näites, kui 'MyCustomFont' ei lae, kasutab brauser varuna 'Helvetica Neue', seejärel 'Arial' ja lõpuks 'sans-serif'.

3. Rakendage laadimisindikaator

Andke kasutajatele visuaalset tagasisidet, kuni fondid laadivad. See võib olla lihtne laadimisikoon või keerukam edenemisriba. See aitab hallata kasutajate ootusi ja vältida mõtet, et leht on katki.

            // Show loading indicator
const loadingIndicator = document.getElementById('loading-indicator');
loadingIndicator.style.display = 'block';

font.addEventListener('loadingdone', function() {
  // Hide loading indicator
  loadingIndicator.style.display = 'none';
});

font.addEventListener('loadingerror', function() {
  // Hide loading indicator and display an error message
  loadingIndicator.style.display = 'none';
  // Display error message
});

            

              
                Copy
              
            
          

4. Optimeerige fondifailide vorminguid

Kasutage kaasaegseid fondifailide vorminguid nagu WOFF2, mis pakuvad paremat tihendust võrreldes vanemate vormingutega nagu WOFF ja TTF. WOFF2 on laialdaselt toetatud kaasaegsete brauserite poolt ja võib oluliselt vähendada fondifailide suurust. Kaaluge tööriista nagu Font Squirrel's Webfont Generator kasutamist, et teisendada oma fondid WOFF2 ja teistesse vormingutesse. See pakub ka suurepäraseid CSS-i koodijuppe, mis aitavad teil fonte oma veebisaidile integreerida.

5. Kasutage fontide alamhulki (subsetting)

Fontide alamhulga loomine tähendab kasutamata märkide eemaldamist fondifailist, vähendades selle suurust. See on eriti kasulik veebisaitidele, mis vajavad ainult piiratud hulka märke. Näiteks kui teie veebisait on peamiselt inglise keeles, saate eemaldada märgid, mida kasutatakse ainult teistes keeltes.

Fontide alamhulga loomiseks on saadaval mitu tööriista, sealhulgas:

• Font Squirrel Webfont Generator: Pakub alamhulga loomise võimalust fondi teisendamise ajal.
• Glyphhanger: Käsurea tööriist kasutatud märkide eraldamiseks HTML- ja CSS-failidest.
• FontForge: Tasuta ja avatud lähtekoodiga fondiredaktor, mis võimaldab teil käsitsi glüüfe eemaldada.

6. Kaaluge fondi CDN-i kasutamist

Sisu edastamise võrgud (CDN-id) aitavad teil fonte kiiresti ja tõhusalt edastada kasutajatele üle maailma. CDN-id hoiavad fondifailide vahemälu erinevates geograafilistes piirkondades asuvates serverites, tagades, et kasutajad saavad fonte alla laadida neile lähedal asuvast serverist. See vähendab latentsust ja parandab allalaadimiskiirust.

Populaarsed fondi CDN-id on:

• Google Fonts: Tasuta ja laialdaselt kasutatav fondi CDN, mis majutab suurt hulka avatud lähtekoodiga fonte.
• Adobe Fonts (endine Typekit): Tellimuspõhine fonditeenus, mis pakub laia valikut kvaliteetseid fonte.
• Fontdeck: Fonditeenus, mis võimaldab teil oma fonte nende CDN-is majutada.

7. Kasutage fontide vahemälu tõhusalt

Seadistage oma server fondifaile korralikult vahemällu salvestama. See võimaldab brauseritel fonte lokaalselt salvestada ja vältida nende korduvat allalaadimist. Kasutage sobivaid vahemälu päiseid, et kontrollida, kui kaua fonte vahemälus hoitakse. Levinud praktika on seada pikk vahemälu eluiga fondifailidele, mis tõenäoliselt sageli ei muutu.

8. Jälgige fondilaadimise jõudlust

Kasutage brauseri arendajatööriistu ja veebisaidi jõudluse jälgimise tööriistu, et jälgida fondilaadimise jõudlust. See aitab teil tuvastada kitsaskohti ja parendusvaldkondi. Pöörake tähelepanu sellistele mõõdikutele nagu fondi allalaadimisajad, renderdamisajad ja FOIT/FOUT probleemide esinemine.

CSS-i omadus font-display

CSS-i omadus font-display annab täiendava kontrolli fondi renderdamise käitumise üle. See võimaldab teil määrata, kuidas brauser peaks teksti kuvamist käsitlema fondi laadimise ajal. Omadusel font-display on mitu väärtust, millest igaühel on oma renderdamisomadused:

• auto: Brauser kasutab oma vaikefondi kuvamise strateegiat. See on tavaliselt samaväärne väärtusega block.
• block: Brauser peidab esialgu teksti, kuni font on laaditud. See hoiab ära FOUT-i, kuid võib põhjustada FOIT-i.
• swap: Brauser kuvab teksti kohe varufondi abil. Kui kohandatud font on laaditud, vahetab brauser varufondi kohandatud fondi vastu. See hoiab ära FOIT-i, kuid võib põhjustada FOUT-i.
• fallback: Brauser peidab esialgu teksti lühikeseks ajaks (tavaliselt 100 ms). Kui font ei ole selle aja jooksul laaditud, kuvab brauser teksti varufondi abil. Kui kohandatud font on laaditud, vahetab brauser varufondi kohandatud fondi vastu. See pakub tasakaalu FOIT-i vältimise ja FOUT-i minimeerimise vahel.
• optional: Brauser kuvab teksti varufondi abil. Brauser võib valida kohandatud fondi allalaadimise ja kasutamise, kui see on saadaval, kuid see ei ole garanteeritud. See on kasulik fontide puhul, mis ei ole lehe esmaseks renderdamiseks hädavajalikud.

Saate kasutada font-display omadust oma CSS-i reeglites:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2');
  font-display: swap;
}

            

              
                Copy
              
            
          

Valige font-display väärtus, mis sobib kõige paremini teie veebisaidi vajaduste ja kasutajakogemuse eesmärkidega. Kaaluge kompromisse FOIT-i ja FOUT-i vahel ning valige väärtus, mis pakub kõige vastuvõetavamat tasakaalu.

Reaalse elu näited ja juhtumiuuringud

Vaatame mõnda reaalset näidet sellest, kuidas veebifontide API-d saab kasutada fondilaadimise optimeerimiseks ja kasutajakogemuse parandamiseks.

1. E-poe veebisait

E-poe veebisait saab kasutada veebifontide API-d, et eelistada tootenimedes ja kirjeldustes kasutatavate fontide laadimist. Laadides need fondid esimesena, saab veebisait tagada, et kasutajad näevad tooteteavet kiiresti. Veebisait saab rakendada ka laadimisindikaatorit, et anda visuaalset tagasisidet teiste fontide laadimise ajal. Väärtust font-display: swap saab kasutada renderdamise blokeerimise vältimiseks, tagades samal ajal, et lõpuks kuvatakse õiged fondid.

2. Uudiste veebisait

Uudiste veebisait saab kasutada veebifontide API-d fontide asünkroonseks laadimiseks, vältides nende blokeerimist lehe esmasel renderdamisel. See võib parandada veebisaidi tajutavat jõudlust ja vähendada põrkemäärasid. Veebisait saab kasutada ka fondide alamhulki, et vähendada fondifailide suurust ja parandada allalaadimiskiirust. Selles stsenaariumis oleks sobiv väärtus font-display: fallback.

3. Portfoolio veebisait

Portfoolio veebisait saab kasutada veebifontide API-d kohandatud fontide laadimiseks nõudmisel, ainult siis, kui neid on vaja. See võib vähendada esialgset lehe laadimisaega ja parandada üldist kasutajakogemust. Veebisait saab kasutada ka fontide vahemälu, et tagada fontide kiire laadimine järgmistel külastustel. Kui kohandatud fondid on puhtalt dekoratiivsed ja mittehädavajalikud, võib parim valik olla font-display: optional.

Globaalsed kaalutlused veebifontide optimeerimisel

Veebifontide optimeerimisel globaalsele publikule arvestage järgmiste teguritega:

• Keeletugi: Veenduge, et teie fondid toetavad teie veebisaidil kasutatavaid keeli. Kasutage Unicode'i fonte, mis sisaldavad glüüfe paljude märkide jaoks. Kaaluge erinevate keelte või piirkondade jaoks eraldi fondifailide kasutamist, et vähendada failisuurusi.
• Piirkondlikud eelistused: Olge teadlik piirkondlikest fondieelistustest ja disainitavadest. Näiteks võivad mõned piirkonnad eelistada sans-serif fonte, samas kui teised võivad eelistada serif fonte. Uurige sihtrühma ja valige fondid, mis sobivad nende kultuurilisse konteksti.
• Võrgutingimused: Optimeerige fondilaadimine kasutajatele, kellel on aeglane või ebausaldusväärne võrguühendus. Kasutage fondide alamhulki, tihendamist ja vahemälu, et minimeerida fondifailide suurust. Kaaluge fondi CDN-i kasutamist, et edastada fonte erinevates geograafilistes piirkondades asuvatest serveritest.
• Juurdepääsetavus: Veenduge, et teie fondid on ligipääsetavad puuetega kasutajatele. Kasutage sobivaid fondisuurusi, reavahesid ja värvikontraste. Pakkuge alternatiivteksti piltidele ja ikoonidele, mis kasutavad kohandatud fonte.
• Litsentsimine: Olge teadlik kasutatavate fontide litsentsimistingimustest. Veenduge, et teil on vajalikud litsentsid fontide kasutamiseks oma veebisaidil ja sihtpiirkondades. Mõned fondilitsentsid võivad piirata kasutamist teatud riikides või teatud eesmärkidel.

Levinud fondilaadimise probleemide tõrkeotsing

Siin on mõned levinud fondilaadimise probleemid ja kuidas neid tõrkeotsinguga lahendada:

• FOIT (nähtamatu teksti välgatus): See ilmneb siis, kui brauser peidab teksti, kuni font on laaditud. FOIT-i vältimiseks kasutage omadust font-display: swap või font-display: fallback.
• FOUT (stiilimata teksti välgatus): See ilmneb siis, kui brauser kuvab teksti varufondi abil, kuni kohandatud font on laaditud. FOUT-i minimeerimiseks valige varufondid, mis on stiililt sarnased teie kohandatud fontidega. Kaaluge ka font-display: optional lähenemist mitte-kriitiliste fontide jaoks.
• Font ei lae: Selle põhjuseks võivad olla mitmesugused tegurid, näiteks valed fondi URL-id, serveri konfiguratsiooniprobleemid või brauseri ühilduvusprobleemid. Kontrollige brauseri arendajatööriistades veateateid ja veenduge, et fondifailid on kättesaadavad.
• CORS-i probleemid: Kui teie fondifailid asuvad teisel domeenil, võite kokku puutuda CORS-i (Cross-Origin Resource Sharing) probleemidega. Veenduge, et teie server on konfigureeritud lubama ristpäritolu päringuid fondifailidele.
• Fondi renderdamise probleemid: Fondi renderdamise probleemid võivad olla põhjustatud mitmesugustest teguritest, näiteks fondi vihjamise (hinting) probleemidest, brauseri renderdamisvigadest või valedest CSS-i sätetest. Proovige katsetada erinevate fondi renderdamise sätetega või kasutada teist fonti.

Kokkuvõte

Lisamaterjalid

• MDN Web Docs: FontFace
• CSS Fonts Module Level 4: FontFace Interface
• Google Fonts
• Adobe Fonts
• Font Squirrel Webfont Generator